<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>添加银行卡</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/layer.css" />
    <link rel="stylesheet" type="text/css" href="../css/mobiscroll_002.css" >
    <link rel="stylesheet" type="text/css" href="../css/mdw.css" />


    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../script/swiper.min.js"></script>
    <script type="text/javascript" src="../script/mobile.js"></script>
    <script type="text/javascript" src="../script/layer.js"></script>
    <script type="text/javascript" src="../script/mdw.js"></script>
    <script type="text/javascript" src="../script/jumpPage.js"></script>

    <script src="../script/mobiscroll_002.js" type="text/javascript"></script>
    <script src="../script/mobiscroll_004.js" type="text/javascript"></script>
    <script src="../script/mobiscroll.js" type="text/javascript"></script>
    <script src="../script/mobiscroll_003.js" type="text/javascript"></script>
    <script src="../script/mobiscroll_005.js" type="text/javascript"></script>
</head>
<body class="bg-eee">
    <header class="header">
        <div class="backPrevPage" onclick="historyBack()"></div>
        <div class="pageTitle">添加银行卡</div>

    </header>
    <section class="loginBox HTML_BOX">
        <div class="bg-eee" style="border-bottom:.2rem solid #EEE; "></div>
        <ul class="addBox settings plr bg-fff">
            <li class="">
                <div class="boxTit">持卡人姓名</div>
                <div class="inputInfo"><input placeholder="请填写持卡人姓名" tyoe="text" /></div>
            </li>
            <li class="">
                <div class="boxTit">银行卡号</div>
                <div class="inputInfo"><input placeholder="请输入银行卡号" tyoe="text" /></div>
            </li>
        </ul>
        <div class="bg-eee" style="border-bottom:.2rem solid #EEE; "></div>
        <ul class="addBox settings plr bg-fff">
             <li class="">
                <div class="boxTit">卡片有效期</div>
                <div class="inputInfo timeIcon"><input id="appDateTime" placeholder="请填写卡片有效期" tyoe="text" /><i></i></div>
            </li>
            <li class="">
                <div class="boxTit">CVV</div>
                 <div class="inputInfo "><input placeholder="请填写卡号背后三位数" tyoe="text" /></div>
            </li>
        </ul>

        <div class="loginBtn f_c">确定添加</div>
    </section>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
	$(".loginBtn").click(function(){
        var layers = "";
        var isnull = false;
        $(".addBox input").each(function(i,item){
            var val = $(item).val();
            if(val == "" && !isnull){
                switch(i){
                    case 0:
                    layers = "请填写持卡人姓名";
                    if(cnen==2){
                        layers = "Please fill in the cardholder's name";
                    }
                    isnull = true;
                    break;
                    case 1:
                    layers = "请输入银行卡号";
                    if(cnen==2){
                        layers = "Please enter the bank card number";
                    }
                    isnull = true;
                    break;
                    case 2:
                    layers = "请填写卡片有效期";
                    if(cnen==2){
                        layers = "Please fill in the validity period of the card";
                    }
                    isnull = true;
                    break;
                    case 3:
                    layers = "请填写卡号背后三位数";
                    if(cnen==2){
                        layers = "Please fill in the three digits behind the card number";
                    }
                    isnull = true;
                    break;
                }
            }
        });
        if(isnull){
            console.log(layers);
            pop.notice(layers);
            return;
        }
        var p = {
            token:token,
            name:$(".addBox input").eq(0).val(),
            card_numb:$(".addBox input").eq(1).val(),
            card_time:$(".addBox input").eq(2).val(),
            cvv:$(".addBox input").eq(3).val(),
            //car_id:$(".addBox input").eq(0).val(),
        }
        pop.loading();
        getAjax(Interface.add_card,p,function(res){
            pop.close();
          console.log(JSON.stringify(res));
          api.sendEvent({
                name: 'add_bank',
                extra: {}
            });
          pop.notice(res.msg,1,function(){
            historyBack();
          });

        },function(res,err){});
    });
    apiready = function(){
        $api.fixStatusBar($api.dom('header'));
        api.setStatusBarStyle({
            color: '#fff',//设置APP状态栏背景色
            style: 'dark'
        });
        ifCnAndEn();
    };
    var currYear = (new Date()).getFullYear();
    var opt={};
    var l='zh';
    if(cnen ==2){
        l='en';
    }
    var today = "重置";
    if(cnen ==2){
        today='Today';
    }
    opt.date = {preset : 'date'};
    opt.datetime = {preset : 'datetime'};
    opt.time = {preset : 'time'};
    opt.default = {
        theme: 'android-ics light', //皮肤样式
        display: 'modal', //显示方式
        mode: 'scroller', //日期选择模式
        dateFormat: 'mm/dd',
        dateOrder:'mmdd',
        lang: l,
        showNow: true,
        nowText: today,
        minDate: new Date(),  //无法选择以前的时间
        startYear: currYear , //开始年份
    };

    var optDateTime = $.extend(opt['date'], opt['default']);
    $("#appDateTime").mobiscroll(optDateTime);
    function choosecity(){
        //选择国家后回调
        api.addEventListener({
            name: 'chooseloading'
        }, function(ret, err) {
            var data =ret.value;
            $("#guojia").val(data.id);
            $("#cgj span").html(data.name);
            $("#sf").val('0');
            $("#chengshi").val('0');
            $("#csf span").html('请选择省份');
            if(cnen==2){
                $("#csf span").html('Province');
            }
            $("#ccs span").html('请选择城市');
            if(cnen==2){
                $("#ccs span").html('City');
            }
        });
        //选择省份
        api.addEventListener({
            name: 'province'
        }, function(ret, err) {
            var data =ret.value;
            $("#sf").val(data.id);
            $("#csf span").html(data.name);
            $("#chengshi").val('0');
            $("#ccs span").html('请选择城市');
            if(cnen==2){
                $("#ccs span").html('City');
            }

        });
        //选择城市
        api.addEventListener({
            name: 'choosecity'
        }, function(ret, err) {
            var data =ret.value;
            $("#chengshi").val(data.id);
            $("#ccs span").html(data.name);
            pop.loading();
            getAjax(Interface.ziti_addr,{city_id:data},function(res){
                pop.close();
                console.log(JSON.stringify(res));
                if(res.data==null){
                    msg = '该地区没有我们的门店';
                    if(cnen==2){
                        msg='There are no stores in this city. Please choose again';
                    }
                    pop.notice(msg);
                }
            },function(res,err){})
        });
    }

</script>
<script type="text/javascript">
    function ifCnAndEn(){
        if(cnen==2){
          $(".pageTitle").html("My Card ");
          $(".addCard span").html("Add bank card");
          $(".addBox li").eq(0).find("input").attr('placeholder',"");
          $(".addBox li").eq(1).find("input").attr('placeholder',"");
          $(".addBox li").eq(2).find("input").attr('placeholder',"");
          $(".addBox li").eq(3).find("input").attr('placeholder',"");

          $(".addBox li").eq(0).find(".boxTit").html("Card Holder");
          $(".addBox li").eq(1).find(".boxTit").html("Card Number");
          $(".addBox li").eq(2).find(".boxTit").html("Valid Thru");

          $(".loginBtn").html('Save');
         
        }
    }
</script>
</html>
